<template>
    <div class="todo">
        <div class="todo-header">
            <input class="todo-header-input" placeholder="请输入.." v-model="msg"/>
            <div class="todo-header-btn" @click="addMsg">
                <text class="ok">确定</text>
            </div>
        </div>
        <list class="list">
            <cell class="cell" v-for="(value, index) in todoList">
                <div class="container" @click="deleteMsg(index)">
                    <text class="text">{{value}}</text>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage');
    var modal = weex.requireModule('modal');
    var stream = weex.requireModule('stream');

    export default {
        components: {},
        data () {
            return {
                msg: '',
                todoList: this.$store.state.todo.todoList
            }
        },
        methods: {
            addMsg (e) {
//                this.getStarCount('vuejs/vue', res => {
//                    console.log('res', res);
//                });


                if (this.msg !== "") {
                    this.$store.dispatch('ADD_TODO_MSG_ASYNC', {msg: this.msg});
                    this.msg = "";
                } else {
                    modal.alert({
                        message: '输入不能为空',
                    })
                }
            },
            deleteMsg(index) {
                this.$store.dispatch('DELETE_TODO_MSG_ASYNC', {index: index});
            },
//            getStarCount (repo, callback, progressCallback) {
//                return stream.fetch({
//                    method: 'GET',
//                    type: 'jsonp',
//                    url: 'http://app.qdaily.com/app/homes/left_sidebar.json'
//                }, callback, progressCallback)
//            }

        },
        created () {
            this.$store.dispatch('QUERY_TODO_MSG_ASYNC');
        },
        mounted () {

        }
    }
</script>

<style scoped>
    .todo {
        flex: 1;

    }

    .todo-header {
        flex-direction: row;
    }

    .todo-header-input {
        background-color: yellow;
        width: 600px;
        height: 100px;
        padding-left: 20px;
    }

    .todo-header-btn {
        background-color: red;
        width: 150px;
        height: 100px;

        justify-content: center;
        align-items: center;
    }

    .todo-body {

    }

    .container {
        width: 600px;
        height: 250px;
        margin-left: 75px;
        margin-top: 35px;
        margin-bottom: 35px;
        flex-direction: column;
        justify-content: center;
        border-width: 2px;
        border-style: solid;
        border-color: rgb(162, 217, 192);
        background-color: rgba(162, 217, 192, 0.2);
    }

    .text {
        font-size: 50px;
        text-align: center;
        color: #41B883;
    }


</style>
